<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <style>
    *{margin:0;padding:0}
        footer>div,footer>span{
           padding: 0 5%;
            width:25%;
            box-sizing: border-box;
            display:inline-block;
            text-align: center;
        }
        footer div img{
            max-height: 2rem;
            max-width: 2rem;
        }
        .asd{

        }
        [style*="width"]{
            background-color: red;
        }
        input:checked{
            background-color: red;
        }
        input 
    </style>
</head>
<body>
<header>
    <image style="float:left;width:3rem;height:3rem;" src="./images/top_back.png" />
        <image style="float:right;width:3rem;height:3rem;" src="./images/top_category.png"/>

    <div style="margin:0 3.5rem 0 3.5rem;">
        <input style="
        background-image: url('./images/search.png');
        background-repeat: no-repeat;
        background-size: 2rem;
        background-color:lightgrey;width:100%;height:3rem;border-radius: 1rem;border:none" type="text" placeholder="            输入目的地"/>
    </div>
</header>
<div>
<image style="width:100%" src="images/commend.jpg"></image>
</div>
<div style="height:14rem;border-top:1px solid black;border-bottom:1px solid black;font-size:2rem">
    <div style="text-align:center;line-height:14rem;background-color: blue;float: left;width:50%;height:100%;box-sizing: border-box">
        <image style="width: 2rem;height:2rem" src="images/jd_arr1.png">热门景点</div>
    <div></div>

</div>
<div style="height: 20rem;background-color: #555;vertical-align: middle;position:relative">
    <div style="float:left;height:100%;width:16rem;line-height:20rem;">
<image src="images/jd_pic.jpg" style="width:16rem;vertical-align: middle"></image>
    </div>
    <p style="font-size: 3rem;padding:3rem;padding-left:18rem;">洞头望海楼景区</p>
    <p><span style="background-color: red;font-size:5rem;padding:0 3rem;">返</span><span>券</span></p>
    <p style="position: absolute;right:3rem;top:0;bottom:0;font-size: 4rem;line-height: 20rem;"><span>￥</span><span>100.00</span>起</p>
</div>
<div style="height: 10rem;background-color: black">
    asdf
    a
    dsfa
    sdf

</div>
<footer style="background-color: #777777;position: fixed;
left:0;right:0;bottom:0;height:7rem;z-index: 10;
background-color: red">
    <div>
        <img src="images/bottom_home.png">
    </div><div>
        <img src="images/bottom_find.png">
    </div><div>
        <img src="images/bottom_shop.png">
    </div><div>
        <img src="images/bottom_mine.png">
    </div>


    <span>首页
    </span><span>发现
</span><span>购物车
</span><span>我的</span>

</footer>

</body>
</html>